<template>
  <el-dialog title="上传文件" :model-value="addDialogVisible" :before-close="handleCancel" width="30%">
    <el-form :model="formData" :rules="rules" label-width="80px" ref="addForm">
      <!-- 文件上传 -->
      <el-form-item label="文件:" prop="file">
        <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :show-file-list="false"
            accept="image/*"
            :http-request="customHttpRequest"
        >
          <el-button type="primary" icon="el-icon-upload2">上传图片</el-button>
        </el-upload>
      </el-form-item>

      <!-- 链接文本输入框 -->
      <el-form-item label="描述:" prop="link">
        <el-input v-model="formData.link" placeholder="请输入文字描述"></el-input>
      </el-form-item>

      <!-- 类型下拉框 -->
      <el-form-item label="类型:" prop="type">
        <el-select v-model="formData.type" placeholder="请选择类型">
          <el-option label="推荐图" value="1"></el-option>
          <el-option label="直播专区" value="2"></el-option>
          <el-option label="活动专区" value="3"></el-option>
          <el-option label="最近上新" value="4"></el-option>
        </el-select>
      </el-form-item>

      <!-- 日期和时间选择 -->
      <el-form-item label="选择时间:" prop="dateTime">
        <el-date-picker
            v-model="formData.time"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus';
import {addFileApi, uploadFileApi} from '@/api/bannerResApi';
import {valueOf} from "@eslint/js"; // 引入上传API

export default {
  props: {
    addDialogVisible: Boolean,
  },
  emits: ['closeDialog', 'addSuccess'],
  setup(props, {emit}) {
    const formData = reactive({
      // file: '',
      link: '', // 新增链接字段
      fileName: '',
      type: '',
      time: '',

    });

    const rules = reactive({
      file: [
        {required: true, message: "请上传文件", trigger: "blur"}
      ],
      // link: [
      //   {required: false, message: "请输入有效的链接", trigger: "blur"}
      // ],
      type: [
        {
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }
      ],
      dateTime: [
        {
          required: true,
          message: '请选择时间',
          trigger: 'change'
        }
      ]
    });

    const uploadUrl = '/indexRes/upload';  // 上传的URL

    // 关闭弹窗
    const handleCancel = () => {
      formData.file = null;
      formData.link = ''; // 清空链接字段
      emit('closeDialog');
    };

    // 提交上传
    const onSubmit = async () => {
      console.log(formData)
      try {
        const response = await addFileApi(formData);
        ElMessage.success('文件上传成功');
        handleCancel(); // 关闭弹窗

      } catch (error) {
        console.log(error)
      }
      // if (formData.file) {
      //   emit('addSuccess'); // 上传成功时触发父组件的addSuccess事件
      //   // formData.file = null; // 清空文件字段
      //   console.log(formData)
      //   ElMessage.success('文件上传成功');
      //   handleCancel(); // 关闭弹窗
      // } else {
      //   ElMessage.error('请先上传文件');
      // }
    };

    // 自定义请求方法，用于上传
    const customHttpRequest = async (options) => {
      const formDatas = new FormData();
      formDatas.append('file', options.file);
      try {
        const response = await uploadFileApi(formDatas);
        options.onSuccess(response, options.file);  // 返回上传成功的数据
        formData.fileName = response.data
      } catch (error) {
        options.onError(error);  // 上传失败回调
      }
    };

    // 上传成功回调
    const handleUploadSuccess = (response, file, fileList) => {
      console.log(response.data)

    };

    // 上传失败回调
    const handleUploadError = (error, file, fileList) => {
      ElMessage.error('文件上传失败');
    };

    return {
      formData,
      rules,
      uploadUrl,
      handleCancel,
      onSubmit,
      customHttpRequest,
      handleUploadSuccess,
      handleUploadError
    };
  }
};
</script>

<style scoped>
.upload-demo i {
  margin-right: 10px;
}
</style>
